{% extends '../_base.html' %}

{% block nav %} /wiki/{{ wiki.id }} {% endblock %}

{% block meta %}
    <meta property="og:type" content="article" />
    <meta property="og:url" content="http://{{ __request__.host }}/wiki/{{ wiki.id }}{% if current.type == 'wikipage' %}/{{ current.id }}{% endif %}" />
    <meta property="og:title" content="{{ current.name }}" />
    <meta property="og:description" content="{{ wiki.description }}" />
    <meta property="og:image" content="http://{{ __request__.host }}/files/attachments/{{ wiki.cover_id }}/l" />
{% endblock %}

{% block title %}{{ current.name }}{% endblock %}

{% block head %}
    {% set __sidebar_left__ = true %}
    {% set __offcanvas_left__ = true %}
<style>
.x-wiki-visible {
    display: block;
}
</style>

<script>
loadComments('{{ current.id }}');

var
    comment_type = '{{ current.type }}',
    comment_ref_id = '{{ current.id }}',
    comment_tag = '{{ wiki.tag }}';

function onAuthSuccess() {
    initCommentArea(comment_type, comment_ref_id, comment_tag);
}

$(function () {
    if (g_user !== null) {
        initCommentArea(comment_type, comment_ref_id, comment_tag);
    }
});

$(function () {
    var
        current = $('#{{ current.id }}'),
        prev = current.prev().find('a'),
        next = current.next().find('a'),
        L = [];
    current.addClass('uk-active');
    $('#off-{{ current.id }}').addClass('uk-active');
    L.push('<div class="uk-clearfix uk-margin-left uk-margin-right">');
    if (prev.length > 0) {
        L.push('<span class="uk-float-left"><i class="uk-icon-chevron-left"></i> <a href="');
        L.push(prev.attr('href'));
        L.push('">');
        L.push(encodeHtml(prev.text()));
        L.push('</a></span>');
    }
    if (next.length > 0) {
        L.push('<span class="uk-float-right"><a href="');
        L.push(next.attr('href'));
        L.push('">');
        L.push(encodeHtml(next.text()));
        L.push('</a> <i class="uk-icon-chevron-right"></i></span>')
    }
    L.push('</div>');
    $('#x-wiki-prev-next').html(L.join(''));
});
</script>
{% endblock %}

{% block sidebar_left_content %}
    <ul class="uk-nav uk-nav-side">
        <li class="uk-nav-header">{{ _('Index') }}</li>
    </ul>
    <ul class="uk-nav uk-nav-side" style="margin-right:-15px;">
        <li id="{{ wiki.id }}"><a href="/wiki/{{ wiki.id }}">{{ wiki.name }}</a></li>
    {% for n in tree %}
        <li id="{{ n.id }}" style="margin-left:{{ n.depth + 1 }}em;">
            <a href="/wiki/{{ wiki.id }}/{{ n.id }}">{{ n.name }}</a>
        </li>
    {% endfor %}
    </ul>
    <div class="x-placeholder"></div>
{% endblock %}

{% block offcanvas_left %}
    <ul class="uk-nav uk-nav-side">
        <li class="uk-nav-header">{{ _('Index') }}</li>
    </ul>
    <ul class="uk-nav uk-nav-side">
        <li id="off-{{ wiki.id }}"><a href="/wiki/{{ wiki.id }}">{{ wiki.name }}</a></li>
    {% for n in tree %}
        <li id="off-{{ n.id }}" style="margin-left:{{ n.depth + 1 }}em;">
            <a href="/wiki/{{ wiki.id }}/{{ n.id }}">{{ n.name }}</a>
        </li>
    {% endfor %}
    </ul>
    <div class="x-placeholder"></div>
{% endblock %}

{% block content %}
    <h4>{{ current.name }}</h4>
    <div class="x-wiki-info"><span>{{ _('Reads') }}: {{ current.views }}</span></div>
    <hr>
    <div class="x-wiki-content">
        {{ current.content|safe }}
    </div>
    <hr>
    <div id="x-wiki-prev-next" class="uk-clearfix uk-margin-left uk-margin-right">
    </div>
    <hr>

    <div class="x-anchor"><a name="comments"></a></div>

    <h3>{{ _('Comments') }}</h3>

    <ul id="x-comment-list" class="uk-comment-list">
    </ul>

    <h3>{{ _('Make a Comment') }}</h3>

    <div class="x-display-if-not-signin">
        <p><button type="button" class="uk-button" onclick="showSignin()"><i class="uk-icon-signin"></i> Sign In to Make a Comment</button></p>
    </div>

    <div id="x-comment-area"></div>

{% endblock %}
